<template>
  <div class="mb-10">
    <div class="flex flex-col leading-[50px] mb-6">
      <div class="text-[20px]">您所在地区的当前时间：</div>
      <div class="text-[68px] font-bold text-[#41A5E0]">{{ dataObj.nowtime }}</div>
    </div>
    <div class="flex items-center">
      <div class="text-[20px]">您设备的公网IP：</div>
      <div class="text-[28px] text-[#41A5E0]">{{ dataObj.ip }}</div>
    </div>
    <div class="flex items-center">
      <div class="text-[20px]">您的当前地址：</div>
      <div class="text-[28px] text-[#41A5E0]">{{ dataObj.address }}</div>
    </div>
    <div class="flex items-center">
      <div class="text-[20px]">您的当前时区：</div>
      <div class="text-[28px] text-[#41A5E0]">{{ dataObj.timezone }}</div>
    </div>
    <div class="flex items-center">
      <div class="text-[20px]">您的UTC偏移：</div>
      <div class="text-[28px] text-[#41A5E0]">{{ dataObj.UTCOffset }}</div>
    </div>
    <div class="flex items-center">
      <div class="text-[20px]">您所在国家：</div>
      <div class="text-[28px] text-[#41A5E0]">{{ dataObj.country }}</div>
    </div>
    <div class="flex items-center">
      <div class="text-[20px]">您所在国家代码：</div>
      <div class="text-[28px] text-[#41A5E0]">{{ dataObj.countryCode }}</div>
    </div>
    <div class="flex items-center">
      <div class="text-[20px]">您所在国家的货币：</div>
      <div class="text-[28px] text-[#41A5E0]">{{ dataObj.currency }}</div>
    </div>
    <div class="flex items-center">
      <div class="text-[20px]">您所在国家的国际区号：</div>
      <div class="text-[28px] text-[#41A5E0]">{{ dataObj.callingCode }}</div>
    </div>
    <div class="flex items-center">
      <div class="text-[20px]">您所在国家的首都：</div>
      <div class="text-[28px] text-[#41A5E0]">{{ dataObj.capital }}</div>
    </div>
    <div class="flex items-center">
      <div class="text-[20px]">您所在的经度：</div>
      <div class="text-[28px] text-[#41A5E0]">{{ dataObj.longitude }}</div>
    </div>
    <div class="flex items-center">
      <div class="text-[20px]">您所在的纬度：</div>
      <div class="text-[28px] text-[#41A5E0]">{{ dataObj.latitude }}</div>
    </div>
    <div class="flex items-center">
      <div class="text-[20px]">日出时间：</div>
      <div class="text-[28px] text-[#41A5E0]">{{ dataObj.sunrise }}</div>
    </div>
    <div class="flex items-center">
      <div class="text-[20px]">日落时间：</div>
      <div class="text-[28px] text-[#41A5E0]">{{ dataObj.sunset }}</div>
    </div>
  </div>
  <div class="text-[28px] font-bold">周边国家的时区情况</div>
  <el-table border stripe style="width: 100%" :data="dataObj.dataList">
    <el-table-column label="国家" prop="country"></el-table-column>
    <el-table-column label="UTC偏移" prop="UTCOffset"></el-table-column>
  </el-table>

</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { ElDescriptions, ElDescriptionsItem, ElTable, ElTableColumn } from 'element-plus';

const dataObj = reactive({
  ip: '获取ip地址中...',
  address: '',
  nowtime: '',
  timezone: '',
  UTCOffset: '',
  dst: false,
  sunrise: '',
  sunset: '',
  country: '',
  capital: '',
  callingCode: '',
  latitude: '',
  longitude: '',
  currency: '',
  countryCode: '',
  dataList: [{
    country: '日本',
    UTCOffset: '+9小时'
  }, {
    country: '韩国',
    UTCOffset: '+9小时'
  }, {
    country: '蒙古',
    UTCOffset: '+8小时'
  }, {
    country: '越南',
    UTCOffset: '+7小时'
  }, {
    country: '泰国',
    UTCOffset: '+7小时'
  }, {
    country: '缅甸',
    UTCOffset: '+6.5小时'
  }, {
    country: '印度',
    UTCOffset: '+5.5小时'
  }, {
    country: '哈萨克斯坦',
    UTCOffset: '+6小时'
  }, {
    country: '俄罗斯（莫斯科）',
    UTCOffset: '+3小时'
  }, {
    country: '巴基斯坦',
    UTCOffset: '+5小时'
  }]
})

const getLocationInfo = async () => {
  timeOutNow();
  getLocation();

  // 获取IP地址和地理位置
  const ipResponse = await fetch('https://ipapi.co/json/');
  const ipData = await ipResponse.json();
  const { ip, city, region, country_name, latitude, longitude, country_capital, country_calling_code, currency, country_code } = ipData;
  dataObj.ip = ip;
  dataObj.address = city + ' ' + region + ' ' + country_name;
  dataObj.capital = country_capital;
  dataObj.country = country_name;
  dataObj.callingCode = country_calling_code;
  dataObj.latitude = latitude;
  dataObj.longitude = longitude;
  dataObj.currency = currency;
  dataObj.countryCode = country_code;

  // 获取时区信息
  const timezoneResponse = await fetch('https://worldtimeapi.org/api/ip');
  const timezoneData = await timezoneResponse.json();
  const { datetime, timezone, utc_offset, dst, dst_from, dst_until } = timezoneData;
  dataObj.timezone = timezone;
  dataObj.UTCOffset = utc_offset;
  dataObj.dst = dst;

  // 获取日出日落时间
  const sunriseSunsetRes = await fetch('https://api.sunrise-sunset.org/json?formatted=0&lat=' + latitude + '&lng=' + longitude);
  const sunriseSunsetData = await sunriseSunsetRes.json();
  const { sunrise, sunset } = sunriseSunsetData.results;
  dataObj.sunrise = formatTime(sunrise);
  dataObj.sunset = formatTime(sunset);

}

const formatTime = (timeStr) => {
  return new Date(timeStr).toLocaleTimeString();
}

const timeOutNow = () => {
  const date = new Date();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  const xz = date.getDay(); // 获取星期
  dataObj.nowtime = weekStr(xz) + ' ' +
    String(hour).padStart(2, '0') + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');

}

const weekStr = (type: number) => {
  switch (type) {
    case 0: return '星期日';
    case 1: return '星期一';
    case 2: return '星期二';
    case 3: return '星期三';
    case 4: return '星期四';
    case 5: return '星期五';
    case 6: return '星期六';
    default: return '星期日';
  }
}

function getLocation() {
  console.log(navigator.geolocation);
  if (navigator.geolocation) {
    console.log("geolocation supported");
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {

  }
}

function showPosition(position) {
  console.log("position: " + position);
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  console.log("Latitude: " + latitude + ", Longitude: " + longitude);
}

function showError(error) {
  switch (error.code) {
    case error.PERMISSION_DENIED:
      break;
    case error.POSITION_UNAVAILABLE:
      break;
    case error.TIMEOUT:
      break;
    case error.UNKNOWN_ERROR:
      break;
  }
}

onMounted(() => {
  setInterval(() => {
    timeOutNow();
  }, 1000);
  getLocationInfo();
})

</script>